<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 我是Vue所管理的视图div#app -->
    <div id="a">
        {{msgA}} -- {{fn1()}}
    </div>
    <!-- 引入vue.js -->
    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            // el作用:指定当前Vue实例所管理的视图,值通常是id选择器
            // 1. el的值可以是css选择器,通常是id选择器
            // 2. el的值不能是html标签和body标签
    
            el: '#a',
            // data作用:指定当前Vue实例的数据对象
            // 1. data中的数据是响应式数据
            // 2. 值可以是一个对象 {属性: 值}
            // 3. 所有数据部分写在data中
            // 4. 在当前Vue实例所管理的视图中通过属性名使用data中的数据
            // 5. 可以通过vm.$data.属性 访问数据
            // 6. 可以通过vm.属性 访问数据(更简单)
            data: {
                msgA: '第一个Vue实例对象'
            },
            // methods作用:指定当前Vue实例中的方法
            // 1. 可以直接通过vm实例访问这些方法，
            // 2. 方法中的 this 自动绑定为 Vue 实例。
            // 3. 不推荐使用箭头函数,因为箭头函数的this指向的不是Vue 实例
            methods: {
                fn1: function() {
                    console.log(this.msgA);
                    console.log('vm实例中的methods里的fn1方法被调用');
                },
                fn2: function() {
                    this.fn1();
                    console.log('fn2方法被调用--');
                },
                fn3: () => {
                    console.log(this);
                }
            }
        });
        // 调用fn2方法
        vm.fn2();
        // 调用fn3方法
        vm.fn3();
    </script>
</body>

</html>